var api_token = sessionStorage.getItem('api_token'); //参数
// var head_title = sessionStorage.getItem('tr_name'); //景区名
var tr_id = sessionStorage.getItem('tr_id'); //景区id
var http; //请求网址
var start_date = sessionStorage.getItem('start_date'); //开始时间
var end_date = sessionStorage.getItem('end_date'); //结束时间
if(start_date && end_date){
    http = 'http://c.yueshengkj.com/api/auth/mac?tr_id=' + tr_id + '&start_date=' + start_date + '&end_date=' + end_date; //请求网址
} else {
    http = 'http://c.yueshengkj.com/api/auth/mac?tr_id=' + tr_id
}
// setInterval(crowdCount,6000);  // 刷新采样数据
function mytime() {
    var t = null;
    t = setTimeout(time, 1000); //開始运行
    function time() {
        clearTimeout(t); //清除定时器
        var dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        var m = dt.getMinutes(); //获取分
        var s = dt.getSeconds(); //获取秒
        document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行
    }
}
function getAllData(arg) {
    var ajaxbg = $("#background,#progressBar");
    $.ajax({
        type: "GET",
        headers: {
            "Authorization":'Bearer ' + api_token//此处放置请求到的用户token
        },
        async: true,
        url: http,
        cache: false,
        crossDomain: true == !(document.all),
        data: {
            // "api_token": api_token,
            "@action": arg.join(',')
        },
        dataType: "json",
        beforeSend:function()
        {
            ajaxbg.show();
        },
        success: function (res) {
            for (var i = 0; i < arg.length; i++) {
                if (arg[i] == 'crowdCount') {
                    crowdCount(res.data.crowdCount);
                } else if (arg[i] == 'tourismResortStayTop') {
                    tourismResortStayTop(res.data.tourismResortStayTop)
                } else if (arg[i] == 'tourismAttractionTop') {
                    tourismAttractionTop(res.data.tourismAttractionTop)
                } else if (arg[i] == 'crowdFlow') {
                    crowdFlow(res.data.crowdFlow)
                } else if (arg[i] == 'information') {
                    information(res.data.information)
                } else if (arg[i] == 'tripMode') {
                    setTripMode(res.data.tripMode)
                } else if (arg[i] == 'phoneTypeCount') {
                    phoneTypeCount(res.data.phoneTypeCount)
                }
            }
            ajaxbg.hide();
        },
        error:function(){
            ajaxbg.hide();
            alert("数据加载失败!");
        }
    });
}
// 大数据区分
function information(data) {
    for (var i = 0; i < Object.keys(data).length; i++) {
        if (Object.keys(data)[i] == '性别') {
            setSex(data.性别);
        } else if (Object.keys(data)[i] == '年龄') {
            setAge(data.年龄);
        } else if (Object.keys(data)[i] == '学历') {
            setEducation(data.学历);
        } else if (Object.keys(data)[i] == '地域') {
            touristDestination(data.地域);
        }
    }
}
// 性别
function setSex(data) {
    var legendData = [];
    var seriesData = [];
    var array = data;
    for (var i = 0; i < array.length; i++) {
        if (array[i].特征 == '男性') {
            legendData.push({name:array[i].特征,icon:'circle'});
            seriesData.push(array[i].占比.replace('%',''));
        } else if (array[i].特征 == '女性') {
            legendData.push({name:array[i].特征,icon:'circle'});
            seriesData.push(array[i].占比.replace('%',''));
        }
    }
    var myChart = echarts.init(document.getElementById('year_consume'));
    var option = {
        title: {
            text: "男女比例",
            textStyle: {
                color: '#D0EBFF',
                fontSize: 14
            },
            left: '60%',
            textAlign:'center',
            y: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c}%"
        },
        legend: {
            orient: 'vertical',
            y: 10,
            x: 'left',
            data: legendData,
            textStyle: {
                color: '#D0EBFF'
            }
        },
        series: [
            {
                name: '性别比例',
                type: 'pie',
                center: ['60%', '50%'],
                radius: ['46%', '60%'],
                avoidLabelOverlap: true,
                labelLine:{
                    normal:{
                        show: true,
                        length:20,
                        length2:70,
                        lineStyle:{
                            color:'#00DAEE',
                            opacity: 0.6,
                        },
                    }
                },
                label: {
                    normal: {
                        formatter: "{b} {c}%",
                        padding: [0, -70,30,-70],
                        rich: {
                            d: {
                                color: '#D0EBFF',
                                align: 'center'
                            }
                        },
                        textStyle: {
                            color: '#D0EBFF'
                        }

                    }
                },
                data: [
                    {
                        value: seriesData[0],
                        name: legendData[0].name,
                        textStyle: {
                            color: '#D0EBFF'
                        },
                        itemStyle: {
                            normal: {
                                color: '#2F7DFF'

                            }
                        }
                    }, {
                        value: seriesData[1],
                        name: legendData[1].name,
                        textStyle: {
                            color: '#D0EBFF'
                        },
                        itemStyle: {
                            normal: {
                                color: '#F15165'

                            }
                        }
                    }
                ]
            }
        ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
// 年龄
function setAge(data) {
    var color = ['#2F7DFF', '#FFD25A', '#AD7EED', '#00D0CF', "#F15165", "#FF9454", "#27ff00", "#fcff25"];
    var legendData = [];
    var nameData = [];
    var ageData = [], selected = {};
    var array = data;
    for (var i = 0; i < array.length; i++) {
        selected[array[i].特征] = parseInt(array[i].占比)!==0;
        ageData.push(array[i].占比.replace('%', ''));
        nameData.push(array[i].特征);
        legendData.push({name:array[i].特征,icon:'circle'});
    }
    var myChart = echarts.init(document.getElementById('age_consume'));
    var option = {
        title: {
            text: "年龄分布",
            textStyle: {
                color: '#D0EBFF',
                fontSize: 14
            },
            left: '60%',
            textAlign:'center',
            y: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c}%"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:legendData,
            textStyle:{
                color: '#D0EBFF'
            },
            selected:selected,
        },
        series: [
            {
                name:'年龄段比例',
                type:'pie',
                center: ['60%', '50%'],
                radius: ['46%', '60%'],
                avoidLabelOverlap: true,
                labelLine:{
                    normal:{
                        show: true,
                        length:20,
                        length2:70,
                        lineStyle:{
                            color:'#00DAEE',
                            opacity: 0.6,
                        },
                    },
                },
                label: {
                    normal: {
                        formatter: "{b} {c}%",
                        padding: [0, -70,30,-70],
                        rich: {
                            d: {
                                color: '#D0EBFF',
                                align: 'center',
                            }
                        },
                        textStyle:{
                            color: '#D0EBFF',
                        },
                    }

                },
                data:[]
            }
        ]
    };
    for (var j = 0; j < legendData.length; j++) {
        option.series[0].data.push(
            {
                value: ageData[j],
                name: nameData[j],
                textStyle: {
                    color: '#D0EBFF'
                },
                itemStyle: {
                    normal: {
                        color: color[j]
                    }
                }
            }
        );
    }
    myChart.setOption(option);
}
// 学历
function setEducation(data) {
    var color = ['#2F7DFF', '#FFD25A', '#AD7EED', '#00D0CF', "#F15165", "#FF9454", "#27ff00"];
    var legendData = [];
    var nameData = [];
    var ageData = [];
    var array = data;
    for (var i = 0; i < array.length; i++) {
        if ( array[i].占比 != '0%') {
            ageData.push(array[i].占比.replace('%',''));
            nameData.push(array[i].特征);
            legendData.push({name:array[i].特征,icon:'circle'});
        }
    }
    var myChart = echarts.init(document.getElementById('edu_consume'));
    var option = {
        title: {
            text: "学历背景",
            textStyle: {
                color: '#D0EBFF',
                fontSize: 14
            },
            left: '60%',
            textAlign:'center',
            y: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c}%"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:legendData,
            textStyle:{
                color: '#D0EBFF'
            }
        },
        series: [
            {
                name:'学历背景',
                type:'pie',
                center: ['60%', '50%'],
                radius: ['46%', '60%'],
                avoidLabelOverlap: true,
                labelLine:{
                    normal:{
                        show: true,
                        length:20,
                        length2:70,
                        lineStyle:{
                            color:'#00DAEE',
                            opacity: 0.6,
                        },
                    },
                },
                label: {
                    normal: {
                        formatter: "{b} {c}%",
                        padding: [0, -70,30,-70],
                        rich: {
                            d: {
                                color: '#D0EBFF',
                                align: 'center'
                            }
                        },
                        textStyle:{
                            color: '#D0EBFF'
                        }
                    }

                },
                data:[]
            }
        ]
    };
    for (var j = 0; j < legendData.length; j++) {
        option.series[0].data.push(
            {
                value: ageData[j],
                name: nameData[j],
                textStyle: {
                    color: '#D0EBFF'
                },
                itemStyle: {
                    normal: {
                        color: color[j]
                    }
                }
            }
        );
    }
    myChart.setOption(option);

}
// 客源地统计
function touristDestination(data) {
    var yDatas = [];
    var datas = [];
    var objArr = [];
    var lengthData = [];
    var array = data;
    for (var i = 0; i < array.length; i++) {
        var province = array[i].特征.indexOf('省');
        var district = array[i].特征.indexOf('区');
        var city = array[i].特征.indexOf('市');
        if (province > 0 || district > 0 || city > 0) {
            objArr.push({
                num: parseInt(array[i].占比),
                city: array[i].特征,
                length: 100
            })
        }
    }
    // console.log("我是objArr",objArr);
    // 数组对象排序
    var compare = function (obj1, obj2) {
        var val1 = obj1.num;
        var val2 = obj2.num;
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }
    };
    var arrData = objArr.sort(compare).reverse(); //数组对象从小到大排序，使用reverse()方法颠倒排序
    var arrayData = arrData.slice(0, 9); //截取数组前十
    arrayData = arrayData.reverse()
    // 循环arrData数组
    for (var j = 0; j < arrayData.length; j++) {
        yDatas.push(arrayData[j].city);
        datas.push(arrayData[j].num);
        lengthData.push(arrayData[j].length)
    }
    var myChart = echarts.init(document.getElementById('tourist_consume'));
    var myChartWidth = parseInt(window.getComputedStyle(document.getElementById('tourist_consume')).width);
    var option = {
        grid: {
            left: 10,
            right: 0,
            top: 0,
            bottom: 0,
            // x: 50
            containLabel: true
        },

        "tooltip": {
            "show": true,
            "trigger": "axis",
            formatter: function (a) {
                return a[0].name+' '+a[0].value + '%';
            },
            "axisPointer": {
                "type": "shadow"
            },
            "textStyle": {
                "align": "left",
                "fontSize": 14,
                "color": "#D0EBFF",
                "fontStyle": "normal",
                "fontWeight": "normal",
                "fontFamily": "sans-serif"
            },
            "extraCssText": "box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2)",
            "showContent": true,
            "alwaysShowContent": false,
            "backgroundColor": "rgba(50,50,50,0.7)",
            "borderColor": "#333"
        },
        "xAxis": {
            "type": "value",
            "max": '120',
            "splitLine": {
                "show": false
            },
            "axisLine": {
                "show": false
            },
            "axisLabel": {
                "show": false,
                textStyle: {
                    color: '#D0EBFF',
                    fontSize: 14
                }
            },
            "axisTick": {
                "show": false
            }
        },
        "yAxis": {
            "type": "category",
            offset: 10,
            "axisLine": {
                "show": false,
                lineStyle: {
                    color: '#B3AFA1',
                }
            },
            "axisTick": {
                "show": false
            },
            "axisLabel": {
                "show": true,
                "textStyle": {
                    "fontSize": 14,
                    color: '#D0EBFF',
                },
                interval: 0,
                formatter: function (value) {
                    if (value.length > 4) {
                        return value.substring(0, 3)+  '...';
                        if (value.length > 9) {
                            return value.substring(0, 4)+'\n' + value.substring(4, 7) + '...';
                        } else {
                            return value.substring(0, 4) + '\n' + value.substring(4, 9);
                        }
                    } else {
                        return value;
                    }}
            },
            data: yDatas
        },
        "series": [{
            name: '游客占比',
            "type": "bar",
            "barWidth": 10,
            "stack": "b",
            tooltip: {
                show: true,
            },
            itemStyle: {
                normal: {
                    "barBorderRadius": 6,
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [{
                        offset: 0,
                        color: '#71FFD5'
                    }, {
                        offset: 1,
                        color: '#0079FF'
                    }])
                }
            },
            label: {
                normal: {
                    show: true,
                    position: [myChartWidth*0.75, '-70%'],
                    formatter: function (param) {
                        return param.value + '%';
                    },
                    textStyle: {
                        color: '#71FFD5',
                        fontSize: 14,
                    }
                }
            },
            data: datas
        },
            {
                name: '',
                tooltip: {
                    show: true,
                },
                "type": "bar",
                "barWidth": 16,
                "barGap": "-130%",
                    "itemStyle": {
                    "normal": {
                        "barBorderRadius": 30,
                        "color": "rgba(0,0,0,0)",
                        "borderWidth": 1,
                        "borderColor": "rgba(0,176,255,.7)"
                    }
                },
                "data": lengthData,
                "z": 0
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

}
// 出行方式
function setTripMode(data) {
    var color = ['#00D0CF','#2F7DFF','#1EDEB4','#FF8454'];
    var legendData = [];
    var seriesData = [];
    for (var i=0;i<data.length;i++) {
        legendData.push({name:data[i].dvc_name,icon:'circle'});
        seriesData.push(data[i].countPercentage.replace('%',''));
    }
    var myChart = echarts.init(document.getElementById('zi_jia_consume'));
    var option = {
        title: {
            text: "出行方式",
            textStyle: {
                color: '#D0EBFF',
                fontSize: 14
            },
            left: '60%',
            textAlign:'center',
            y: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c}%"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:legendData,
            textStyle:{
                color: '#D0EBFF'
            }
        },
        series: [
            {
                name:'出行方式',
                type:'pie',
                center: ['60%', '50%'],
                radius: ['46%', '60%'],
                avoidLabelOverlap: true,
                labelLine:{
                    normal:{
                        show: true,
                        length:20,
                        length2:70,
                        lineStyle:{
                            color:'#00DAEE',
                            opacity: 0.6,
                        },
                    },
                },
                label: {
                    normal: {
                        formatter: "{b} {c}%",
                        padding: [0, -70,30,-70],
                        rich: {
                            d: {
                                color: '#D0EBFF',
                                align: 'center'
                            }
                        },
                        textStyle:{
                            color: '#D0EBFF'
                        }
                    }

                },
                data:[]
            }
        ]
    };
    for (var j1 = 0; j1 < seriesData.length; j1++) {
        option.series[0].data.push(
            {
                value:seriesData[j1],
                name:  legendData[j1].name,
                icon:  'circle',
                textStyle: {
                    color: '#D0EBFF',
                    fontSize: 12
                },
                itemStyle: {
                    normal: {
                        color: color[j1]
                    }
                }
            }
        );
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
}
// 手机品牌
function phoneTypeCount(data) {
    var color = ['#FF9454','#F15165','#00D0CF','#9248FF','#2F7DFF','#00D086','#F4BF33'];
    var legendData = [];
    var seriesData = [];
    var compare = function (obj1, obj2) {
        var val1 = Number(obj1.countPercentage.replace('%', ''));
        var val2 = Number(obj2.countPercentage.replace('%', ''));
        if (val1 < val2) {
            return -1;
        } else if (val1 > val2) {
            return 1;
        } else {
            return 0;
        }
    }
    var arrData = data.sort(compare); //数组对象从小到大排序，使用reverse()方法颠倒排序
    for (var i=0;i<arrData.length;i++) {
        if ( arrData[i].countPercentage != '0%') {
            legendData.push({name:arrData[i].type,icon:'circle'});
            seriesData.push(arrData[i].countPercentage.replace('%',''));
        }
    }
    var myChart = echarts.init(document.getElementById('phone_consume'));
    var option = {
        title: {
            text: "手机品牌",
            textStyle: {
                color: '#D0EBFF',
                fontSize: 14
            },
            left: '60%',
            textAlign:'center',
            y: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c}%"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:legendData,
            textStyle:{
                color: '#D0EBFF'
            }
        },
        series: [
            {
                name:'手机品牌',
                type:'pie',
                center: ['60%', '50%'],
                radius: ['46%', '60%'],
                avoidLabelOverlap: true,
                labelLine:{
                    normal:{
                        show: true,
                        length:20,
                        length2:70,
                        lineStyle:{
                            color:'#00DAEE',
                            opacity: 0.6,
                        },
                    }
                },
                label: {
                    normal: {
                        formatter: "{b} {c}%",
                        padding: [0, -70,30,-70],
                        rich: {
                            d: {
                                color: '#D0EBFF',
                                align: 'center'
                            }
                        },
                        textStyle:{
                            color: '#D0EBFF'
                        }
                    }

                },
                data:[]
            }
        ]
    };
    for (var j1 = 0; j1 < seriesData.length; j1++) {
        option.series[0].data.push(
            {
                value: seriesData[j1],
                name: legendData[j1].name,
                textStyle: {
                    color: '#D0EBFF'
                },
                itemStyle: {
                    normal: {
                        color: color[j1]
                    }
                }
            }
        )
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}
$(function () {
    mytime();
    getAllData(['information','tripMode','phoneTypeCount']);
})